import React from 'react';
// 在 React 中，组件内所以的子元素都可以通过 props.children 获取，来实现插槽的功能
// React.cloneElement React.Children
// const Dialog = (props) => {
//     return (
//         <div style={{ border: `1px solid ${props.color || 'red'}` }}>
//             <div className="title">{props.children[0]}</div>
//             {/* <div className="body">{props.children[1]}</div>
//             <div className="footer">{props.children[2]}</div> */}
//             <div>{props.sidebar}</div>
//         </div>
//     );
// };

// export default () => {
//     return (
//         <div>
//             <Dialog sidebar={<div>Hello World</div>} color="green">
//                 <h3>这是标题</h3>
//                 <p>这是内容</p>
//                 <p>这是页脚</p>
//             </Dialog>
//         </div>
//     );
// };

const Radio = ({ children, ...rest }) => {
    return (
        <label>
            {children}
            <input type="radio" {...rest} />
        </label>
    );
};

const RadioGroup = (props) => {
    return (
        <div>
            {React.Children.map(props.children, (item) => {
                return React.cloneElement(item, { name: props.name });
            })}
        </div>
    );
};

export default () => {
    return (
        <div>
            <RadioGroup name="hobby">
                <Radio value="1">游泳</Radio>
                <Radio value="2">健身</Radio>
                <Radio value="3">LOL</Radio>
                <Radio value="4">学习</Radio>
                <Radio value="5">敲代码</Radio>
            </RadioGroup>
        </div>
    );
};
